<html>
<head>
    <title>GeoExt Feature Renderer</title>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
    <script src="http://www.openlayers.org/api/2.9/OpenLayers.js"></script>
    <script type="text/javascript" src="../lib/GeoExt.js"></script>

    <script src="renderer.js"></script>
    <style type="text/css">
        .x-window-body {
            background-color: white;
        }
        #swatches {
            padding: 1em;
        }
        #swatches td {
            border: 1px solid #ccc;
            text-align: center;
            margin: 0 auto;
            padding: 0.5em;
        }
        #swatches td div div {
            text-align: left; /* IE centers VML in root otherwise */
        }
        #wkt {
            width: 400px;
            height: 100px;
        }
        #symbolizers {
            width: 400px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="panel"></div>
    <h1>GeoExt.FeatureRenderer</h1>
    <p>The FeatureRenderer renderers arbitrary OpenLayers.Feature.Vector objects
    given a list of symbolizers.  The FeatureRenderer component can be used 
    anywhere a box component is used.</p>

    <p>The js is not minified so it is readable. See <a href="renderer.js">renderer.js</a>.</p>

    <h2>Symbol Types</h2>
    <p>If the feature renderer is not given a feature, it can be configured to
    render a default feature based on geometry type alone.</p>
    <table id="swatches">
        <tbody>
            <tr><td>&nbsp;</td><td>point</td><td>line</td><td>polygon</td></tr>
            <tr>
                <td>default</td>
                <td id="point_default"></td>
                <td id="line_default"></td>
                <td id="poly_default"></td>
            </tr><tr>
                <td>blue</td>
                <td id="point_blue"></td>
                <td id="line_blue"></td>
                <td id="poly_blue"></td>
            </tr><tr>
                <td>custom</td>
                <td id="point_custom"></td>
                <td id="line_custom"></td>
                <td id="poly_custom"></td>
            </tr>
            </tr><tr>
                <td>stacked</td>
                <td id="point_stacked"></td>
                <td id="line_stacked"></td>
                <td id="poly_stacked"></td>
            </tr>
        </tbody>
    </table>
    
    <h2>Custom Feature Rendering</h2>
    <p>You can render any OpenLayers.Feature.Vector object with a FeatureRenderer.
    Use the inputs below to modify the well-known text and symbolizer.  These
    will be used to render a feature in a new window.</p><br>
    <label for="wkt">Geometry Well-Known Text</label><br>
    <textarea id="wkt">
POLYGON((1 30, -33 10, -39 -21, 1 -41, 23 -22, 27 15, 1 30), (0 10, -14 0, -4 -24, 12 -8, 0 10))
    </textarea><br><br>
    <label for="symbolizers">Feature Symbolizers</label><br>
    <textarea id="symbolizers">
[{
    fillColor: "yellow",
    fillOpacity: 1,
    strokeColor: "blue",
    strokeWidth: 1,
    pointRadius: 5
}]
    </textarea><br>
    <button id="render">render</button>
</body>
</html>
